<template>
  <el-table
      :data="tableData"
      class="trainFault"
      ref="faultTable"
      :header-cell-style="{'text-align':'left',background:'#131E3D'}"
      :cell-style="{'text-align':'left'}"
      highlight-current-row
      @current-change="handleCurrentChange"
      :row-class-name="tableRowClassName"
      @row-click="faultSelected"
      style="width: 100%; ">
    <el-table-column
        prop="id"
        label="序号"
        width="67">
    </el-table-column>
    <el-table-column
        prop="trainCode"
        label="车辆号"
        width="82">
    </el-table-column>
    <el-table-column
        prop="coachNo"
        label="车厢号"
        width="79">
    </el-table-column>
    <el-table-column
        prop="systemCode"
        label="故障系统"
        width="91">
    </el-table-column>
    <el-table-column
        prop="faultLevel"
        label="故障等级"
        width="95">
      <template slot-scope="scope">
        <el-tag v-if=" scope.row.faultLevel==='严重'" type="danger">严重</el-tag>
        <el-tag v-if=" scope.row.faultLevel==='中等'" type="warning">中等</el-tag>
        <el-tag v-if=" scope.row.faultLevel==='轻微'" type="warning">轻微</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="faultCode"
        label="故障代码"
        width="93">
    </el-table-column>
    <el-table-column
        prop="faultName"
        label="故障名称"
        width="163">
    </el-table-column>
    <el-table-column
        prop="faultPart"
        label="待排查部件"
        width="283">
      <template slot-scope="scope">
          <el-tag  v-for="item in scope.row.faultPart" style="background-color: rgba(61, 71, 95, 1)" type="success" @click="test(scope)">{{ item }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="maintenanceAdvice"
        label="检修建议"
        width="165">
    </el-table-column>
    <el-table-column
        prop="happenTime"
        label="发生时间"
        sortable
        width="160">
    </el-table-column>
    <el-table-column
        prop="endTime"
        label="解除时间"
        sortable
        width="160">
    </el-table-column>
    <el-table-column
        prop="duration"
        sortable
        label="持续时间"
        width="100">
    </el-table-column>
    <el-table-column
        prop="address"
        label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "FaultAlertTable",
  props: ["tableData","highLightCode"],
  data() {
    return {
      hightLightRow:0,
      componentOptions: [{
        value: '选项1',
        label: '电机滤网'
      }, {
        value: '选项2',
        label: '电机轴承'
      },{
        value: '选项3',
        label: '电机温度传感器'
      }],
      componentSelcted: []
    }
  },
  mounted(){

  },
  watch:{
    tableData: function(){
      console.log("进入时的故障代码：", this.highLightCode);
      // console.log("watch:",this.tableData);
      for(let i = 0; i < this.tableData.length; i++) {
        // console.log("进入的table：", this.tableData[i].faultCode);
        if (this.tableData[i].faultCode === this.highLightCode) {
          console.log("进入时的故障代码：", i, this.tableData[i].faultCode);
          this.$refs.faultTable.setCurrentRow(this.tableData[i]);
        }
      }
    }
  },
  methods:{

    tableRowClassName({row, rowIndex}) {
      // console.log("高亮的行：",row, rowIndex);
      if (row.faultCode === this.hightLightRow) {
        return 'warning-row';
      } else{
        return 'success-row';
      }
    },
    handleEdit:function (index, row)
    {
      // console.log("11111",index,row);
    },

    test:function (scope){
      // console.log("!!!!",scope.row);
      // console.log("222222",this.tableData.toBeCheck);
    },
    // 鼠标点击时选中行高亮
    setCurrent(row) {
      this.$refs.faultTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      // this.currentRow = val;
      // console.log("handleCurrentChange:",this.currentRow);
      // this.$refs.faultTable.toggleRowSelection(this.currentRow);
    },
    faultSelected: function (row){
      // console.log("显示的曲线：",row);
      this.$emit('faultToChart',row);
      this.hightLightRow = row.faultCode;
    }
  }
}

</script>

<style>
/*.el-table, .el-table__expanded-cell {*/
/*  background-color: #0B1021;*/
/*}*/
/*.el-table__header-wrapper .el-table__header{*/
/*  background-color: #0B1021 ;*/
/*}*/
/*表格所有字体修改*/
.el-table .cell{
  font-size: 14px;
}
/*修改除表头外的表格行内背景颜色和字体颜色*/
.el-table th, .el-table tr {
  background-color: #0F172D;
  color: white;
}
/*下方滚动条*/
.el-table__body-wrapper is-scrolling-middle{
  /*background-color: #0B1021;*/
  /*background-color: #131E3D;*/
  color: white;
}
/*待排查部件的tag标签属性*/
.el-tag.el-tag--success{
  background-color: #777777;
  color: white;
  border-color: transparent;
}
/*故障等级中的严重标签属性*/
.el-tag.el-tag--danger{
  background-color:rgba(235, 43, 51, 0.1);
  border-color: rgba(247, 152, 28, 0.4);
  color: rgba(235, 43, 51, 1);
}
/*故障等级中的中等/轻微标签属性*/
.el-tag.el-tag--warning{
  background-color: rgba(247, 152, 28, 0.1);
  border-color: rgba(247, 152, 28, 0.4);
  color: rgba(247, 152, 28, 1);
}
 /*用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
  /*background-color: rgba(22, 97, 196, 0.24) !important;*/
  background-color: rgba(24, 124, 255, 0.48)!important;
  /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
}

/*.el-table .warning-row {*/
/*  background-color: rgba(24, 124, 255, 0.48)!important;*/
/*}*/
/*.el-table .success-row {*/

/*}*/
/*!* 用来设置当前页面element全局table 鼠标移入某行时的背景色*!*/
/*.el-table--enable-row-hover .el-table__body tr:hover>td {*/
/*  background-color: rgba(24, 124, 255, 0.48)!important;*/
/*}*/

.el-table__body tr.current-row>td.el-table__cell {
  background-color: #0F172D;
}

</style>
